import "./index.less";
import React, { useState } from "react";
import { View } from "@tarojs/components";
import { Cell, Button, Image, Avatar, Empty } from "@nutui/nutui-react-taro";
import { TriangleDown, Scan } from "@nutui/icons-react-taro";
import { pxTransform } from "@tarojs/taro";

function Header({ user }) {
  return (
    <Cell className="header">
      <View className="header_ava">
        <Avatar
          style={{ width: pxTransform(80), height: pxTransform(80) }}
          src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
        />
        <View className="name">我的宝宝</View>
        <TriangleDown
          style={{ marginRight: "10px", fontSize: "14rpx", color: "#F0863E" }}
        />
      </View>

      <View className="header_bg">
        <img src={require("@/assets/ibook.png")} />
      </View>

      <Button
        className="btn_scam"
        color="#FFECD7"
        icon={<Scan color="#C27E32" size={pxTransform(28)} />}
      >
        <span style={{ color: " #C27E32" }}>扫码添加</span>
      </Button>
    </Cell>
  );
}

function CategoryItem({ src, label, count, color }) {
  const getColorClasses = (color) => {
    const colorMap = {
      pink: {
        bg: "#EF336E",
        text: "text-pink-500",
      },
      blue: {
        bg: "#5374FF",
        text: "text-blue-500",
      },
      orange: {
        bg: "#F0863E",
        text: "text-orange-500",
      },
      green: {
        bg: "#1FCE6B",
        text: "text-green-500",
      },
      purple: {
        bg: "#57BEFF",
        text: "text-purple-500",
      },
      purple1: {
        bg: "#AA5EE5",
        text: "text-purple-500",
      },
    };

    return colorMap[color] || { bg: "bg-gray-100", text: "text-gray-500" };
  };

  const { bg, text } = getColorClasses(color);

  return (
    <View className="categoryItem">
      <View className="categoryItem_top">
        <span className="categoryItem_txt">
          <img src={src} />
        </span>
      </View>

      <View className="categoryItem_bot">{label}</View>
      <View className="categoryItem_num">
        <span style={{ color: bg }}>{count}</span>
        <View>个</View>
      </View>
    </View>
  );
}

function Category({ data }) {
  const categories = [
    {
      id: 1,
      src: require("@/assets/book2.png"),
      label: "本周汉字",
      count: 12,
      color: "pink",
    },
    {
      id: 2,
      src: require("@/assets/book1.png"),
      label: "本周古诗",
      count: 8,
      color: "blue",
    },
    {
      id: 3,
      src: require("@/assets/book.png"),
      label: "本周成语",
      count: 12,
      color: "orange",
    },
    {
      id: 4,
      src: require("@/assets/word.png"),
      label: "本周单词",
      count: 8,
      color: "green",
    },
    {
      id: 5,
      src: require("@/assets/ufo.png"),
      label: "本周科普",
      count: 12,
      color: "blue",
    },
    {
      id: 6,
      src: require("@/assets/star.png"),
      label: "本周故事",
      count: 8,
      color: "purple1",
    },
  ];

  return (
    <Cell
      className="category"
      title="学习记录"
      description={
        <View className="categoryItem_box">
          {categories.map((category) => (
            <CategoryItem
              key={category.id}
              src={category.src}
              label={category.label}
              count={category.count}
              color={category.color}
            />
          ))}
        </View>
      }
    ></Cell>
  );
}

function Camera({ data }) {
  return (
    <View>
      <Cell.Group divider={false} style={{ width: "100%", height: "100%" }}>
        <Cell
          title="拍照记录"
          align="center"
          extra={
            <Button
              color="#FFECD7"
              className="btn_more"
              style={{ color: "#C27E32" }}
              rightIcon={<TriangleDown color="#C27E32" />}
            >
              更多
            </Button>
          }
        />
        <Cell>
          <Empty
            title="数据为空"
            style={{
              width: "100%",
              height: "100%",
            }}
            image={
              <Image
                style={{
                  width: "100%",
                  height: "100%",
                }}
                src={require("@/assets/empty.png")}
              />
            }
          ></Empty>
        </Cell>
      </Cell.Group>
    </View>
  );
}

function Home({}) {
  return (
    <View className="headerBox">
      <Header user={111}></Header>
      <Category></Category>
      <Camera></Camera>
    </View>
  );
}

export default Home;
